<template>
  <!--  地址灾害档案页面-->
  <div class="box-view">
    <el-row :gutter="15">
      <el-col :span="4" class="left_org">
        <!-- 搜索框 -->
        <organization-tree v-model="deptTree" ref="deptTree" :changeOnSelect='true' placeholder="选择管养单位"
                           @change="selectOrgHandel"></organization-tree>
      </el-col>
      <el-col :span="20">
        <div class="page">
          <div style="padding: 20px 0px 0px 20px">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item @click.native="breadClick(item.deptTreeIdList)" v-for="item in deptTree.breadList"
                                  :key="item.name">
                <el-button type="text" class="bread_button_text">{{item.deptName}}</el-button>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <el-divider></el-divider>
          <!-- 数据统计-->
          <el-row>
            <el-col :span="12">
              <!--路线统计-->
              <el-card class="card_echarts" shadow="hover">
                <echarts-nesting-change ref="echartsOneChange"></echarts-nesting-change>
              </el-card>
            </el-col>
            <el-col :span="12">
              <!--区间统计-->
              <el-card class="card_echarts" shadow="hover">
                <echarts-nesting-change ref="echartsTwoChange"></echarts-nesting-change>
              </el-card>
            </el-col>
          </el-row>
          <!-- 条件筛选 -->
          <el-divider></el-divider>
          <div class="page_filter">
            <el-input v-model="form.queryString" clearable placeholder="请输入灾害名称或编号">
              <template slot="prepend">灾害名称/编号</template>
            </el-input>
            <el-autocomplete
              v-model="state"
              clearable
              :fetch-suggestions="querySearchAsync"
              placeholder="请输入路线名称或编号"
              @change="handleChange"
              @select="handleSelect"
            ></el-autocomplete>
            <!--            <el-select v-model="form.roadId" clearable filterable placeholder="选择路线">-->
            <!--              <el-option-->
            <!--                v-for="item in deptRoadList"-->
            <!--                :key="item.id"-->
            <!--                :label="item.name"-->
            <!--                :value="item.id">-->
            <!--              </el-option>-->
            <!--            </el-select>-->
            <el-select v-model="form.damageType" clearable placeholder="灾害类型">
              <el-option
                v-for="item in damageTypeList"
                :key="item.code"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>

            <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索</el-button>
          </div>
          <div class="page_main">
            <el-button icon="el-icon-plus" @click.stop="handleAdd" class="common_btn-small"
                       :disabled="hasPermission('road:damageInfo:add')?false:'disabled'">新增地质灾害档案
            </el-button>
            <!--      <el-button icon="el-icon-plus" @click.stop="handleAddFile" class="common_btn-small">地质灾害档案导入</el-button>-->
            <el-button
              :disabled="isDelDamageAuth?false:'disabled'"
              @click.stop="handleDelete"
              icon="el-icon-delete-solid"
              type="danger">删除
            </el-button>
            <!-- table -->
            <div class="common_btnBox">
              <i class="iconfont iconzongshu icon-size"></i>
              总数：{{form.total}}
            </div>
            <el-table
              :data="tableList" @selection-change="handleSelectionChange"
              border>
              <el-table-column type="selection" width="80"></el-table-column>

              <el-table-column
                label="序号"
                fixed
                width="80">
                <template slot-scope="scope">
                  {{scope.$index+1}}
                </template>
              </el-table-column>
              <el-table-column prop="damageNo" min-width="180" label="灾害编号"></el-table-column>
              <el-table-column prop="name" min-width="180" label="灾害名称"></el-table-column>
              <el-table-column prop="damageTypeName" width="120" label="灾害类型"></el-table-column>
              <el-table-column prop="roadName" min-width="140" show-overflow-tooltip label="所属路线"></el-table-column>
              <el-table-column prop="deptName" min-width="200" show-overflow-tooltip label="养管单位"></el-table-column>
              <el-table-column label="起止桩号" min-width="180">
                <template slot-scope="scope">
                  K{{scope.row.startPointBig}}+{{scope.row.startPointSmall}}~K{{scope.row.endPointBig}}+{{scope.row.endPointSmall}}
                </template>
              </el-table-column>
              <el-table-column prop="createTime" width="180" label="更新时间">
                <template slot-scope="scope">{{scope.row.createTime | formatTimer}}</template>
              </el-table-column>
              <el-table-column label="操作" fixed="right" :width="isDelDamageAuth?150:100">
                <template slot-scope="scope">
                  <button class="btn_edit" @click="handleEdit(scope.row,false)"
                          v-if="hasPermission('road:damageInfo:add')"> 编辑
                  </button>
                  <button class="btn_edit" @click="handleEdit(scope.row,true)">查看详情</button>
                  <el-popconfirm v-if="isDelDamageAuth" confirmButtonText='好的' cancelButtonText='不用了' icon=""
                                 title="确定删除该地质灾害档案吗？" @confirm="handleDelete1(scope.row.id)">
                    <button slot="reference" class="btn_delete">删除</button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="form.page"
              :page-size="form.pageSize"
              :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next,jumper"
              :total="form.total">
            </el-pagination>
          </div>
          <!-- 新增编辑弹窗 -->
          <el-dialog
            :close-on-click-modal="false"
            :title="isLook?'查看地质灾害档案':dialogTitle"
            :visible.sync="isShowDialog"
            :before-close="clearValidate"
            width="1100px">

            <!-- 具体form表单 -->
            <el-form label-position="right" ref="form" :rules="rules" :model="currentRow" label-width="90px"
                     class="form_width-200">

              <el-row>
                <el-col :span="12">
                  <el-form-item label="管养单位" prop="deptTreeId">
                    <organization :disabled="isLook" v-model="currentRow.deptTreeId" placeholder="选择管养单位"
                                  @change="changeDept2"></organization>
                  </el-form-item>
                  <el-form-item label="所在道路类型" label-width="120px" prop="slopeSlideType">
                    <el-radio-group v-model="currentRow.slopeSlideType" @change="changeSlopeSlide">
                      <el-radio-button v-for="item in EnumSlopeSlideTypeList" :key="item.code" :label="item.code">
                        {{item.name}}
                      </el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="路线" prop="roadId">
                    <el-select :disabled="isLook" v-model="currentRow.roadId" filterable clearable placeholder="选择路线">
                      <el-option
                        v-for="item in deptRoadList2"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="识别名称" v-if="currentRow.slopeSlideType === 2" label-width="140px"
                                prop="attachedName">
                    <el-input v-model.trim="currentRow.attachedName" placeholder="用于识别匝道位置和生成灾害名称">
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <!--匝道需要选择-->
              <el-form-item label="所属行政区" v-if="currentRow.slopeSlideType === 2">
                <region-unit v-model="currentRow.region" placeholder="选择行政区"></region-unit>
              </el-form-item>
              <el-row class="base-end">
                <el-col :span="12">
                  <el-row>
                    <el-col :span="14">
                      <el-form-item label="起点经纬度" prop="startLongitude">
                        <el-input v-model.trim="currentRow.startLongitude" type="number" placeholder="输入经度" :maxlength="10" >
                          <template slot="prepend"><span style="font-size: 15px">E:</span></template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="10">
                      <el-form-item label-width="0px" prop="startLatitude">
                        <el-input v-model.trim="currentRow.startLatitude" type="number" placeholder="输入纬度" :maxlength="10">
                          <template slot="prepend"><span style="font-size: 15px">N:</span></template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="14">
                      <el-form-item label="起点桩号" prop="startPointBig">
                        <el-input :disabled="isLook" v-model.trim="currentRow.startPointBig" type="number" placeholder="输入数字"
                                  @change="changeStoke">
                          <el-select :disabled="isLook" slot="prepend" v-model="currentRow.stokeType">
                            <el-option
                              v-for="item in EnumStationTypeList"
                              :key="item.code"
                              :label="item.name"
                              :value="item.code">
                            </el-option>
                          </el-select>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="10">
                      <el-form-item label-width="0px" prop="startPointSmall">
                        <el-input v-model.trim="currentRow.startPointSmall" type="number" :maxlength="3"
                                  placeholder="输入数字" @change="changeStoke">
                          <template slot="prepend"><span style="font-size: 15px">KM+</span></template>
                          <template slot="append"><span style="font-size: 15px">M</span></template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="14">
                      <el-form-item label="止点经纬度" prop="endLongitude">
                        <el-input :disabled="isLook" v-model.trim="currentRow.endLongitude" type="number" placeholder="输入经度" :maxlength="10">
                          <template slot="prepend"><span style="font-size: 15px">E:</span></template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="10">
                      <el-form-item label-width="0px" prop="endLatitude">
                        <el-input :disabled="isLook" v-model.trim="currentRow.endLatitude" type="number" placeholder="输入纬度" :maxlength="10">
                          <template slot="prepend"><span style="font-size: 15px">N:</span></template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="止点桩号" prop="endPointBig">
                        <el-input v-model.trim="currentRow.endPointBig" type="number" placeholder="输入数字" @change="changeStoke">
                          <template slot="prepend">{{stokeTypeName}}</template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label-width="0px" prop="endPointSmall">
                        <el-input v-model.trim="currentRow.endPointSmall" type="number" :maxlength="3"
                                  placeholder="输入数字" @change="changeStoke">
                          <template slot="prepend"><span style="font-size: 15px">KM+</span></template>
                          <template slot="append"><span style="font-size: 15px">M</span></template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
              <el-form-item label="灾害类型" prop="damageType">
                <el-radio-group :disabled="isLook" v-model="currentRow.damageType">
                  <el-radio-button v-for="item in damageTypeList" :key="item.code" :label="item.code">{{item.name}}
                  </el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-row class="build_button_view">
                <el-col :span="12">
                  <el-form-item label="灾害名称" prop="name">
                    <el-input v-model="currentRow.name" disabled placeholder="自动生成">
                      <el-button slot="append" icon="el-icon-thumb" @click="buildDamageName()">生成名称</el-button>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="灾害编号" prop="damageNo" class="build_button_view">
                    <el-input  v-model="currentRow.damageNo" disabled placeholder="自动生成">
                      <el-button slot="append" icon="el-icon-thumb"
                                 @click="buildSlopeNo()" style="backgroundColor:#1990FE">
                        生成编号
                      </el-button>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>

            </el-form>
            <!-- 操作按钮 -->
            <span slot="footer" class="dialog-footer" v-if="!isLook">
        <el-button class="common_btn-white" @click="clearValidate">取消</el-button>
        <el-button class="common_btn-defalut" :disabled="isDisabled" type="primary" @click="validateForm">确定</el-button>
      </span>
          </el-dialog>

          <!--上传文件-->
          <el-dialog title="地质灾害档案导入" :visible.sync="isShowDialogFile" :close-on-click-modal="false" width="520px">
            <el-form ref="newUploadForm" :model="newUploadForm" label-width="80px" label-position="right">
              <el-row>
                <el-col :span="18">
                  <el-form-item label="上传文件" prop="fileName">
                    <el-input v-model="fileName" :readonly='true' placeholder="文件名" style="width:250px;"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-upload class="upload-demo" ref="upload" action="doUpload" :limit="1" :file-list="fileList"
                             :before-upload="beforeUpload">
                    <el-button slot="trigger" type="primary" plain>选取文件</el-button>
                    <!-- <div slot="tip" class="el-upload__tip">只能上传excel文件，且不超过100MB</div>
                          <div slot="tip" class="el-upload-list__item-name">{{fileName}}</div> -->
                  </el-upload>
                </el-col>
              </el-row>
              <el-row>
                <el-button icon="el-icon-download" @click.stop="handleOutFile" size="mini" type="primary">导入模板下载
                </el-button>
              </el-row>

            </el-form>
            <!-- 操作按钮 -->
            <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-white" @click="cancleSub()">取消</el-button>
        <el-button class="common_btn-defalut" type="primary" @click="validateFormFile">确定</el-button>
      </span>
          </el-dialog>

        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import OrganizationTree from '@/components/organization-tree/all'
  import Permission from '@/utils/permission'
  import RegionUnit from '@/components/region-unit2'

  import {
    damageAdd,
    damageAddMore,
    damageDelete,
    damageUpdate,
    getDamageList,
    getRoadSelectList
  } from '@/services/model/road-mgmt'
  import {getDamageCount} from '@/services/model/statistics'
  import Format from '@/utils/format'
  import {filterEmpty} from '@/services/request'
  import ItemMixins from "./old-modules/item.mixins";
  import Organization from '@/components/organization-unit/all'
  import EchartsNestingChange from "./echarts/nesting";
  import Enums from '@/utils/enums'

  // 初始的搜索参数
  const INIT_PARAMS = {
    phone: '',
    name: '',
    username: '',
    email: '',
    proxyCode: ''
  }

  export default {
    mixins: [ItemMixins, Enums],
    components: {Organization, OrganizationTree, EchartsNestingChange, RegionUnit},
    data() {
      return {
        idList: [],
        isLook: false,
        isDisabled: false,
        restaurants: [],
        state: '',
        timeout: null,
        chartsName: ['echartsOneChange', 'echartsTwoChange'],
        deptTree: {
          breadList: [],//面包屑
          deptTreeId: '',
        },
        isShowDialogFile: false,
        fileName: '',
        newUploadForm: {
          fileName: ''
        },
        form: {
          page: 1,
          pageSize: 10,
          roadSectionId: '',
          roadId: '',
        },
        searchParams: INIT_PARAMS, // 搜索3个model
        rules: {
          slopeSlideType: {required: true, message: '请选择所在道路类型'},
          damageType: {required: true, message: '请选择灾害类型'},
          deptTreeId: {required: true, message: '请选择管养单位'},
          roadId: {required: true, message: '请选择路线'},
          latitude: {required: true, message: '请输入纬度'},
          longitude: {required: true, message: '请输入经度'},
          startPointBig: {required: true, message: '请输入起点桩号'},
          endPointBig: {required: true, message: '请输入止点桩号'},
          damageNo: {required: true, message: '请点击生成灾害编号'},
          name: {required: true, message: '请点击生成灾害名称'},
        },
        selectModel: 0, // 下拉选择model
        searchModel: '', // 搜索框model
        tableList: [],

        damageCount: 0,
        isShowDialog: false, // 是否显示弹窗
        currentRow: {
          slopeSlideType: 1,
          stokeType: 1,
          roadSectionId: ''
        }, // 新增数据
        // 启用状态枚举
        damageTypeList: [],
        sectionList: [],
        bigSectionList: [],
        roadList: [],
        deptRoadList: [],
        deptRoadList2: [],
        EnumSlopeSlideTypeList: [],
        EnumMainStationTypeList: [],
        EnumRampStationTypeList: [],
      }
    },
    computed: {
      stokeTypeName() {
        let name = 'K'
        this.EnumStationTypeList.map(x => {
          if (x.code === this.currentRow.stokeType) {
            name = x.name
          }
        })
        return name
      },
      EnumStationTypeList() {
        //根据所选主线或匝道，返回不同的桩号类型选择列表
        return this.currentRow.slopeSlideType === 1 ? this.EnumMainStationTypeList : this.EnumRampStationTypeList
      },
      // 判断是否有地灾档案删除权限
      isDelDamageAuth() {
        let permissionList = this.$store.state.userInfo.permissionList || []
        return permissionList.indexOf('road:damageInfo:del') !== -1
      },
      // 弹窗的title
      dialogTitle() {
        return this.currentRow.id ? '编辑地质灾害档案' : '新增地质灾害档案'
      },
    },
    filters: {
      gradeColor(val) {
        switch (val) {
          case 0:
            return 'background-color:#0DC26B'
          case 1:
            return 'background-color:#0073b7'
          case 2:
            return 'background-color:#f39c12'
          case 3:
            return 'background-color:#ff851b'
          case 4:
            return 'background-color:#e43321'
          default:
            return 'background-color:#ffffff'
        }
      },
      // 时间格式化
      formatTimer(timer) {
        return Format(new Date(timer), 'yyyy-MM-dd hh:mm:ss')
      },
      // 0正常，1锁定
      getStatusBtnMap(type) {
        return type ? '停用' : '启用'
      }
    },
    methods: {
      //生成边坡名称
      buildDamageName() {
        if(this.currentRow.endPointBig!==0 || this.currentRow.endPointBig!==0){
          if (!this.currentRow.startPointBig || !this.currentRow.endPointBig) {
            this.$message({
              message: '提示！请先填入起止桩号',
              type: 'warning'
            });
            return
          }
        }
        if(!this.currentRow.damageType){
            this.$message({
              message: '请先选择灾害类型',
              type: 'warning'
            });
            return
        }
        //计算边坡长度
        let start = Number(this.currentRow.startPointBig * 1000) + Number(this.currentRow.startPointSmall ? this.currentRow.startPointSmall : 0)
        let end = Number(this.currentRow.endPointBig * 1000) + Number(this.currentRow.endPointSmall ? this.currentRow.endPointSmall : 0)
        if (start > end) {
          this.currentRow.endPointBig = ''
          this.$message({
            message: '提示！止点桩号不应比起点桩号小',
            type: 'warning'
          });
          return
        }
        let point = (start + end)/2
        let big = Math.floor(point/1000)
        let small = point % 1000
        //生成边坡名称
        let name = this.stokeTypeName + big +"+" + small

        if (this.currentRow.slopeSlideType === 2 && this.currentRow.attachedName ) {
          this.currentRow.name = this.currentRow.attachedName + name + this.getDamageName(this.currentRow.damageType)
        } else {
          this.currentRow.name = name + this.getDamageName(this.currentRow.damageType)
        }
      },
      getDamageName(val){
        let name
        this.damageTypeList.map(x=>{
          if(x.code==val){
            name = x.name
          }
        })
        return name
      },
      //修改起止桩号
      changeStoke() {
        this.$set(this.currentRow, "name", "");
        this.$set(this.currentRow, "damageNo", "");
      },
      //选择边坡所在道路类型
      changeSlopeSlide() {
        this.currentRow.stokeType = this.EnumStationTypeList[0].code
        this.$set(this.currentRow, "buildTime", "");
        this.$set(this.currentRow, "changeTime", "");
        this.$set(this.currentRow, "roadGrade", "");
        this.$set(this.currentRow, "roadCount", "");
        this.$set(this.currentRow, "luJiWidth", "");
        this.$set(this.currentRow, "luMianWidth", "");
        this.$set(this.currentRow, "slopeNo", "");
        this.$set(this.currentRow, "name", "");
        this.$set(this.currentRow, "attachedName", "");
      },
      //table选择
      handleSelectionChange(val) {
        this.idList = []
        val.map(x => {
          this.idList.push(x.id)
        })
      },
      handleDelete1(id) {
        this.idList = []
        this.idList.push(id)
        this.handleDelete()
      },
      async handleDelete(id) {
        let res = await damageDelete({idList: this.idList})
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '档案删除成功'
          })
        }
        this.queryList()
      },
      async getStaticsDamage() {
        let res = await getDamageCount(this.form);
        let data = res.data
        this.damageCount = data.damageCount[0].value
        this.$refs['echartsOneChange'].updateEchart('灾害类型', data.damageCount, data.damageType, '灾害总数', '灾害类型')
        if (this.damageCount > 0) {
          this.$refs['echartsTwoChange'].updateEchart('路线灾害数量Top10', data.damageCount, data.damageRoadCount, '灾害总数', '路线灾害数量')
        } else {
          this.$refs['echartsTwoChange'].updateEchart('', null, null, '', '')
        }
      },

      //生成边坡编号
      async buildSlopeNo() {
        if (!this.currentRow.deptTreeId) {
          this.$message({
            message: '提示！请选择管养中心',
            type: 'warning'
          });
          return
        }
        if (!this.currentRow.roadId) {
          this.$message({
            message: '提示！请选择路线',
            type: 'warning'
          });
          return
        }
        if (!this.currentRow.startPointBig || !this.currentRow.endPointBig) {
          this.$message({
            message: '提示！请输入起止桩号',
            type: 'warning'
          });
          return
        }
        if (!this.currentRow.damageType) {
          this.$message({
            message: '提示！请选择灾害类型',
            type: 'warning'
          });
          return
        }
        if (this.currentRow.slopeSlideType === 2 && !this.currentRow.region) {
          this.$message({
            message: '提示！请先选择行政区',
            type: 'warning'
          });
          return
        }
        console.log(this.currentRow.slopeSlideType)
        this.currentRow.damageNo = await this.getNo(this.currentRow.damageType,this.currentRow.slopeSlideType);
      },
      //面包屑跳转
      breadClick(deptTreeId) {
        this.$refs.deptTree.changeBread(deptTreeId)
      },
      //组织机构组件回调
      selectOrgHandel() {
        this.$forceUpdate()
        this.form.deptTreeId = this.deptTree.deptTreeId
        this.queryList()
        this.changeDept()
      },
      handleOutFile() { // 文件导出
        const {href} = this.$router.resolve({path: '/statics/damageInfoTemplate.xls'})
        window.open(href)
      },
      beforeUpload(file) { // 上传前 文件校验
        this.files = file
        const extension = file.name.split('.')[1] === 'xls'
        const extension2 = file.name.split('.')[1] === 'xlsx'
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!extension && !extension2) {
          this.$message.warning('上传文件只能是 xls、xlsx格式!')
          return
        }
        if (!isLt2M) {
          this.$message.warning('上传文件大小不能超过 2MB!')
          return
        }
        this.fileName = file.name
        return false // 返回false不会自动上传
      },
      // 确认导入文件
      validateFormFile() {
        this.$refs.newUploadForm.validate(valid => { // 是否通过 表单验证
          if (valid) {
            if (this.fileName === '') {
              this.$message({
                message: '请选择要上传的文件！',
                type: 'warning',
                showClose: true
              })
              return false
            }
            let fileFormData = new FormData()
            fileFormData.append('uploadFile', this.files, this.fileName) // 上传的文件
            damageAddMore(fileFormData).then(res => { // 上传请求
              if (res.code === 200) {
                this.fileName = ''
                this.isShowDialogFile = false
                this.$notify({
                  type: 'success',
                  title: '提示',
                  message: '添加成功'
                })
                this.queryList()
              }
            })
          } else {
            this.$message({
              type: 'warning',
              message: '新增条件有误！',
              showClose: true
            })
          }
        })
      },
      // 新增数据
      handleAddFile() {
        this.isShowDialogFile = true
      },
      //获取路线列表
      async getRoadList() {
        const {data} = await getRoadSelectList()
        this.roadList = data || []
      },
      // 模糊搜索路线
      querySearchAsync(queryString, cb) {
        var restaurants
        if (!queryString) {
          restaurants = [];
        } else {
          restaurants = this.restaurants;

        }
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 10 * Math.random());
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
        };
      },
      handleSelect(item) {
        this.form.roadId = item.id
        this.changeRoad()
      },
      handleChange(item) {
        if (item == '') {
          this.form.roadId = ''
        }
      },
      //获取路线列表
      async changeDept() {
        this.deptRoadList = await this.getRoadListByDept(this.form.deptTreeId)
        let data = []
        this.deptRoadList.map(x => {
          data.push({
            id: x.id,
            value: x.name,
            name: x.name
          })
        })
        this.restaurants = data
      },
      //获取路线列表
      async changeDept2() {
        this.deptRoadList2 = await this.getRoadListByDept(this.currentRow.deptTreeId)
      },
      // 分页大小改变
      handleSizeChange(val) {
        this.form.pageSize = val
        this.queryList()
      },
      // 当前页码改变
      handleCurrentChange(val) {
        this.form.page = val
        this.queryList()
      },
      // 关闭弹窗之前清楚表单校验提示
      clearValidate() {
        this.$refs.form.clearValidate()
        this.isShowDialog = false
      },
      // 表单提交
      validateForm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.currentRow = filterEmpty(this.currentRow)
            this.isDisabled = true
            this.submitData()
          }
        })
      },
      // 新增编辑提交数据
      async submitData(fromTree) {
        // 根据ID判断使用新增还是编辑
        let action = this.currentRow.id ? damageUpdate : damageAdd
        try {
          let res = await action(this.currentRow)
          this.$notify({
            type: 'success',
            title: '提示',
            message: this.currentRow.id ? '修改成功' : '添加成功'
          })
          if (fromTree) {
            this.isShowRelateDialog = false
          }
          this.isShowDialog = false
          this.queryList()


        } catch (e) {
          this.isDisabled = false
        }
        this.isDisabled = false
        return res
      },
      // 新增数据
      handleAdd() {
        this.currentRow = {
          damageNo: '',
          slopeSlideType: 1,
          stokeType: 1,
          roadSectionId: ''
        }
        this.isLook = false
        this.isDisabled = false
        this.isShowDialog = true
        this.$nextTick(() => {
          this.$refs.form.clearValidate()
        })
      },
      /**
       * row  当前操作行的对象
       */
      handleEdit(row, isLook) {
        this.isLook = isLook
        this.currentRow = JSON.parse(JSON.stringify(row))
        this.changeDept2()
        this.isShowDialog = true
        this.isDisabled = false
        this.$nextTick(() => {
          this.$refs.form.clearValidate()
        })
      },
      // 判断权限
      hasPermission(permissionStr) {
        return Permission(this.$store.state.userInfo, permissionStr)
      },
      async queryList() {
        // 先根据选择设置查询参数
        let res = await getDamageList(this.form)
        if (res.code === 200) {
          this.tableList = res.data?.records || []
          this.form.size = Number(res.data?.size)

          this.form.total = Number(res.data?.total)
        }
        this.getStaticsDamage()
      },
    },
    mounted() {
      // 启用状态枚举
      this.queryDictList(['EnumDamageType', 'EnumSlopeSlideType', 'EnumMainStationType', 'EnumRampStationType',], ['damageTypeList', 'EnumSlopeSlideTypeList', 'EnumMainStationTypeList', 'EnumRampStationTypeList',])
      // this.queryList()
      // this.getRoadList()
    },
    activated() {

    }
  }
</script>
<style scoped="scoped" lang="less">
  .base-end {
    .el-input__inner {
      /*height: 30px;*/
    }

    .el-input-group__prepend .el-select {
      width: 74px;
    }

    .el-input-group__append, .el-input-group__prepend {
      padding: 0px 10px;
    }

    .el-input-group__prepend .el-select {
      margin: 0px;
    }

  }

  .build_button_view .el-button--default {
    background-color: #1990FE !important;
    color: white !important;
  }

  .box-view {
    .left_org {
      height: calc(100% - 83px);
      border-radius: 8px;
    }
    .page {
      .page_filter {
        padding: 10px 20px;
      }
    }
  }

  .bread_button_text {
    padding-right: 0px;
    font-size: 18px;
    font-weight: 600;
    color: #1990FE;
  }
  /deep/.build_button_view .el-button--default{
    background: #1990FE !important;
  }
</style>
